<template>
    <el-row class="header">
        <el-col :span="5"></el-col>
        <el-col :span="14">
            <el-row>
                <el-col :span="3" class="user-info-left">
                    <el-row justify="center" align="middle">&nbsp;个人中心</el-row>
                    <el-row
                        class="iconfont icon-yonghu"
                        justify="center"
                        align="middle"
                        @click="router.push('/user-info-setting/user-info')"
                    >&nbsp;我的信息
                    </el-row>

                    <el-row
                        class="iconfont icon-anquanzhongxin"
                        justify="center"
                        align="middle"
                        @click="router.push('/user-info-setting/user-security')"
                    >&nbsp;账号安全
                    </el-row>
                    <el-row
                        class="iconfont icon-clothes"
                        justify="center"
                        align="middle"
                        @click="router.push('/user-info-setting/user-theme')"
                    >&nbsp;更换主题
                    </el-row>
                    <el-row
                        class="iconfont icon-yonghu-yuan"
                        justify="center"
                        align="middle"
                        @click="router.push('/user-info-setting/user-configuration')"
                    >&nbsp;其他设置
                    </el-row>
                </el-col>
                <el-col :span="21" class="user-info-middle">
                    <el-row class="user-info-middle-header iconfont icon-fuzhushuxian" align="middle">我的信息</el-row>
                    <!-- 下面放入组件 -->
                    <router-view></router-view>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="5"></el-col>
    </el-row>
</template>
<script>
import {useRouter} from "vue-router";
import {onMounted} from "vue";

export default {
    setup() {
        onMounted(() => {

        })
        const router = useRouter();
        return {
            router,
        };
    }
};
</script>
<style lang="scss" scoped>
.header {
    height: auto;
    margin-top: 3vh;

    .user-info-left {
        background-color: #fff;
        border-top: 1px solid rgb(221, 221, 221);
        border-left: 1px solid rgb(221, 221, 221);
        border-bottom: 1px solid rgb(221, 221, 221);
        height: 80vh;

        .el-row:nth-child(1) {
            border-bottom: 1px solid rgb(221, 221, 221);
        }

        .el-row {
            height: 6vh;
            width: 100%;
        }

        .el-row:nth-child(2):hover {
            background-color: rgb(225, 228, 234);
        }

        .el-row:nth-child(3):hover {
            background-color: rgb(225, 228, 234);
        }

        .el-row:nth-child(4):hover {
            background-color: rgb(225, 228, 234);
        }

        .el-row:nth-child(5):hover {
            background-color: rgb(225, 228, 234);
        }
    }

    .user-info-middle {
        height: 80vh;
        background-color: #fff;
        border: 1px solid rgb(221, 221, 221);

        .user-info-middle-header {
            height: 6vh;
            border-bottom: 1px solid rgb(221, 221, 221);
            color: rgb(23, 162, 212);
            margin-left: 1vw;
        }
    }
}
</style>